CSS 2 中就已经存在了与内容相关的 content 属性， CSS 3 中再次对该属性进行了重新定义，下面将对该属性进行介绍。
content 属性就是用来插入生成的内容和替换模块，它常常与 :before 选择器和 :after 选择器配合使用，将生成的内容放在一个元素内容的前面和后面。
content ： normal | string | attr() | uri() | counter()
content 属性后面可以跟不同的内容，下面列出常取的值内容。
用 content 属性不仅能够插入文本，还可以插入指定的图像，插入图像时需要使用 url 属性值来指定图像文件的路径。
这个函数只有一个定义资源 URL 的参数，不能设置位置、尺寸和填充方式等 CSS 属性。由此可见，该函数对图像的控制能力不是很高。
div {
padding: 50px;
border: solid 1px red;
content: url(images/1.jpg); /*在 div 元素内添加图片*/
}
content 属性的取值 counter() 是计数器，用于插入排序标识，使用 content 属性的属性值 counter() 可以实现在多个标题前添加连续编号的功能，需要在 counter() 中添加一个参数，该参数表示计算器，用来计算编号，计数器可以任意命名。
另外，除了通过 content 属性插入排序标识外，还需要在元素的样式中追加对元素的 counter-increment 属性的指定，为了使用连续编码，需要将 counter-increment 属性的值设置为 counter() 中指定参数的计算器名。
content 属性使用 counter() 不仅可以追加数字编号，还可以追加字母编号或者罗马数字编号。
当需要插入一系列递增的值时（例如 1 、 2 、 3 ），就可以使用计数器在每个列表项的前面自动插入递增的序号值。要实现计数器，需要 3 个内容属性组合使用，包括 content 、 counter-reset 以及 counter-increment
content 属性使用 counter() 不仅可以追加数字编号，还可以追加字母编号或者罗马数字编号。其基本语法如下：
content: counter(计数器名，编号种类);
通过 counter-reset 属性能为计数器设置名称，并初始化计数器。可以定义两个值，第一个是计数器的名称，第二个是计数初始值，默认为 0 。
通过 counter-increment 属性能设置计数器的增量 。也可以定义两个值，第一个同样是计数器的名称，第二个是增量值，默认为 1 。
在 content 属性中应用 counter() 或 counters() 函数，能将最终的计数显示在页面上
counter （）函数有两个参数，第一个参数是计数器的名称，第二个参数是列表属性 list-style-type 的值，默认为 decimal （阿拉伯数字）。 指定大写字母编号时需要设置为" upper-alpha "属性；指定大写罗马字母时使用" upper-roman "属性。如果需要指定为小写，则需要使用英文" lower-alpha "或者" lower-roman "属性。
counters （）函数有三个参数，第一个和第三个与 counter （）函数中的参数相同，第二个是分隔符。当需要嵌套计数器的时候，可以用这个函数。
ol {
list-style: none;
}
/*清除默认的序号*/
li:before {
color: #f00;
font-family: Times New Roman;
} /*设计层级目录序号的字体样式*/
li {
counter-increment: a 1;
} /*设计递增函数 a,递增起始值为1*/
li:before {
content: counter(a) '. ';
} /*把递增值添加到列表项前面*/
li li {
counter-increment: b 1;
}
/*设计递增函数 b,递增起始值为1*/
li li:before {
content: counter(a) '.' counter(b) '. ';
} /*把递增值添加到二级列表项前面*/
li li li {
counter-increment: c 1;
} /*设计递增函数 c,递增起始值为1*/
li li li:before {
content: counter(a) '.' counter(b) '.' counter(c) '. ';
}
/*把递增值添加到三级列表项前面*/
content 属性与 E:before 和 E:after 选择器配合使用还可以实现在字符串两边嵌套符号的功能。
open-quote 属性值用于添加开始的嵌套文字符号； close-quote 属性值用于添加结尾的嵌套文字符号，然后在元素中使用 quotes 属性指定到底使用什么嵌套文字符号。
使用 content 属性的 open-quote 属性值和 close-quote 属性值还可以在字符串两边添加如括号、单引号、双引号之类的嵌套符号。如果要添加双引号，则需要使用" \ "转义字符 。
p {
quotes: '<' '>';
}
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
no-open-quote 和 no-close-quote 可分别删除 open-quote 与 close-quote 的引用。
项目编码之间可以进行嵌套，可以在大编号中嵌套中编号，也可以在中编号中嵌套小编号或者大编号。
在 content 属性中应用 attr() 函数，可将内容指定为某个 CSS 属性的值。 attr() 函数只接收一个参数，那就是 CSS 属性名。利用这个特性，可以弥补日期控件在移动端不能使用 placeholder 属性的缺陷。 placeholder 是 HTML5 新增的元素属性，提供输入字段预期值的提示信息。